<template>
  <div class="css3Cube" @touchstart="move">
    <ul class="box" ref="boxRef">
      <li class="font">1</li>
      <li class="behind">2</li>
      <li class="left">3</li>
      <li class="right">4</li>
      <li class="top">5</li>
      <li class="bottom">6</li>
    </ul>

  </div>
</template>
<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
@Options({ components: {
} })
export default class Css3Cube extends Vue {
  public move() {
    console.log(11);
    (this.$refs.boxRef as HTMLElement).style.transform = 'rotateX(360deg) rotateY(360deg)';
  }
}
</script>

<style lang="postcss" scoped>
*{
  margin: 0;
  padding: 0;
}
.css3Cube {
  touch-action: none;
  /* perspective: 1000px; */
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin:260px;
    transform: rotateX(25deg) rotateY(25deg);
    transform-style: preserve-3d;
    /* transform-style 设置元素的子元素是位于 3D 空间中还是平面中。 */
    transition: all 2s linear;
    li{
      position: absolute;
      left: 0;
      top: 0;
      list-style: none;
      width: 100%;
      height: 100%;
      line-height: 200px;
      text-align: center;
      background-color: blue;
      opacity: 0.5;
      &.font{
        transform: translateZ(100px);
      }
      &.behind{
        transform:translateZ(-100px);
        background-color: green;
      }
      &.left{
        transform: translateX(-100px) rotateY(90deg);
        background-color: red;
      }
       &.right{
        transform: translateX(100px) rotateY(90deg);
        background-color: yellow;
      }
      &.top{
        transform:translateY(-100px) rotateX(90deg);
        background-color: brown;
      }
      &.bottom{
        transform: translateY(100px) rotateX(90deg);
        background-color: purple;
      }
    }
  }
}
</style>
